import React from 'react';
import { X } from 'lucide-react';
import { useSettings } from '@/contexts/setting';
import { SettingTabType, SaveSettingsStatus } from '@/types/setting';
import SettingTabs from '@/components/setting/SettingTabs';
import ModelSettingForm from '@/components/setting/ModelSettingForm';

/**
 * 设置对话框组件
 * 包含标签页导航和设置表单
 */
const SettingDialog: React.FC = () => {
  const { 
    state, 
    closeSettings, 
    saveSettings, 
    resetSettings 
  } = useSettings();
  
  const { 
    isOpen, 
    activeTab, 
    hasUnsavedChanges, 
    saveStatus 
  } = state;

  // 如果不是打开状态，不渲染对话框
  if (!isOpen) return null;

  // 处理关闭对话框
  const handleClose = () => {
    // 如果有未保存的更改，显示确认提示
    if (hasUnsavedChanges) {
      const confirmClose = window.confirm('您有未保存的更改，确定要关闭吗？');
      if (!confirmClose) return;
    }
    closeSettings();
  };

  // 处理保存设置
  const handleSave = async () => {
    await saveSettings();
  };

  // 处理重置设置
  const handleReset = () => {
    if (hasUnsavedChanges) {
      const confirmReset = window.confirm('确定要放弃所有更改吗？');
      if (!confirmReset) return;
    }
    resetSettings();
  };

  // 渲染当前标签页内容
  const renderTabContent = () => {
    switch (activeTab) {
      case SettingTabType.MODEL:
        return <ModelSettingForm />;
      case SettingTabType.GENERAL:
        return <div className="p-4 text-center text-muted-foreground">通用设置功能即将推出</div>;
      case SettingTabType.ADVANCED:
        return <div className="p-4 text-center text-muted-foreground">高级设置功能即将推出</div>;
      default:
        return null;
    }
  };

  // 保存按钮状态
  const isSaving = saveStatus === SaveSettingsStatus.SAVING;
  const isSaveDisabled = !hasUnsavedChanges || isSaving;

  return (
    <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center overflow-y-auto">
      <div 
        className="bg-background rounded-lg shadow-lg w-full max-w-2xl max-h-[90vh] flex flex-col"
        onClick={e => e.stopPropagation()}
      >
        {/* 对话框标题 */}
        <div className="flex items-center justify-between p-4 border-b">
          <h2 className="text-xl font-semibold">系统设置</h2>
          <button
            onClick={handleClose}
            className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-accent transition-colors"
            aria-label="关闭"
          >
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* 标签页导航 */}
        <SettingTabs />

        {/* 标签页内容 */}
        <div className="flex-1 overflow-y-auto">
          {renderTabContent()}
        </div>

        {/* 底部操作按钮 */}
        <div className="p-4 border-t flex justify-end space-x-3">
          <button
            onClick={handleReset}
            className="px-4 py-2 rounded-md border hover:bg-accent transition-colors"
            disabled={!hasUnsavedChanges}
          >
            重置
          </button>
          <button
            onClick={handleClose}
            className="px-4 py-2 rounded-md border hover:bg-accent transition-colors"
          >
            取消
          </button>
          <button
            onClick={handleSave}
            className={`px-4 py-2 rounded-md text-white transition-colors ${
              isSaveDisabled 
                ? 'bg-primary/50 cursor-not-allowed' 
                : 'bg-primary hover:bg-primary-hover'
            }`}
            disabled={isSaveDisabled}
          >
            {isSaving ? '保存中...' : '保存'}
          </button>
        </div>

        {/* 保存状态提示 */}
        {saveStatus === SaveSettingsStatus.SUCCESS && (
          <div className="absolute bottom-16 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg">
            设置已保存
          </div>
        )}
        {saveStatus === SaveSettingsStatus.FAILED && (
          <div className="absolute bottom-16 left-1/2 transform -translate-x-1/2 bg-red-500 text-white px-4 py-2 rounded-md shadow-lg">
            保存失败，请重试
          </div>
        )}
      </div>
    </div>
  );
};

export default SettingDialog;
